<template>
    <div class="page-list">
        共 {{ total }} 条
        <router-link v-show="first" :to="{path: url, query: {'page': 1}}">
            首页
        </router-link>
        <router-link v-show="first" :to="{path: url, query: {'page': page - 1}}">
            上一页
        </router-link>
        <router-link v-for="(item, key) in items"
                     :to="{path: url, query: {'page': item }}"
                     :key="key">
            {{ item }}
        </router-link>
        <router-link v-show="last" :to="{path: url, query: {'page': page + 1}}">
            下一页
        </router-link>
        <router-link v-show="last" :to="{path: url, query: {'page': totalPage }}">
            尾页
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "Page",
        props: {
            // 第几页
            page: {
                type: Number,
                default: 1,
            },

            // 总页数
            total: {
                type: Number,
                default: 1
            },

            // 地址
            url: {
                type: String,
                default: "/"
            },

            // 每页多少条
            limit: {
                type: Number,
                default: 10
            },

            // 显示几个数字按钮
            length: {
                type: Number,
                default: 5
            }
        },
        computed: {
            totalPage() {
                return Math.ceil(this.total / this.limit);
            },
            first() {
                return this.page > 1;
            },
            last() {
                return this.page < this.totalPage;
            },

            items() {
                let length = Math.floor(this.length / 2),
                    start = this.page - length,
                    end = this.page + length,
                    items = [];
                // 不够长度需要补上
                if (end - start < this.length) {
                    if (end === this.totalPage) {
                        // 判断需要往前补
                        start = this.totalPage - this.length + 1;
                    } else if (start === 1) {
                        // 需要往后补
                        end = this.length
                    }
                }

                start = start <= 1 ? 1 : start;
                end = end >= this.totalPage ? this.totalPage : end;
                for (let i = start; i <= end; i++) {
                    items.push(i);
                }

                return items;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-list {
        text-align: center;
        color: #666;
        width: 100%;
        clear: both;
        margin: 20px auto;
        padding-top: 20px;
        a {
            display: inline-block;
            color: #666;
            margin: 0 2px;
            border: 1px solid #000;
            padding: 5px 15px;
            &:hover, &.router-link-exact-active {
                color: #fff;
                background: #333;
            }
        }
    }
</style>
